<template>
    <scroll-view scroll-y="true"  class="scroll-v pageBg"  @scrolltolower="scrolltolower" lower-threshold="50">
		    <view :style="{ backgroundImage: `url(${staticBg}mybBj2.png)`}"  class="pageBg pageBading">
			<view class="top" v-if="!is_login && !user.student_name" @tap="goLogin">
				<image src="/static/img/noLoginHead.png" mode="" class="headimg"></image>
				<view>
					<view class="name">
						点击登录
					</view>
					<view class="info">
						欢迎使用新华倍阅高校平台
					</view>
				</view>
			</view>	
			<view class="top" v-if="is_login && user.student_name">
				<image :src="user.avatar" mode="" class="headimg"></image>
				<view>
					<view class="name">
						你好，{{user.student_name}}同学
					</view>
					<view class="info">
						欢迎使用新华倍阅高校平台
					</view>
				</view>
			</view>
			<view class="top-banner">
				<uni-swiper-dot :info="swiperTop.info" :current="swiperTop.current"  :dots-styles="swiperTop.dotsStyles" field="content" :mode="swiperTop.mode">
					<swiper class="swiper-box-top">
						<swiper-item v-for="(item,index) in swiperTop.list" :key="index">
							<view class="swiper-item">
								<image src="/static/img/ex03.jpg" mode="widthFix" class="img"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="blocks">
				<view class="block block1"  @tap="gaoInt" :style="{ backgroundImage: `url(${staticBg}block1.png)`}">
					<view class="text">预售操作</view>
				</view>
				<view class="block block2"  @tap="gaoInt" :style="{ backgroundImage: `url(${staticBg}block2.png)`}">
					<view class="text">常见问题问答</view>
				</view>
			</view>
			<view class="new-title">
				预售活动
			</view>
		    <view class="payMore" v-if="topPay" @tap="goToPay">
				<view>您有未支付的购书订单</view>
				<view>去支付></view>
			</view>
			<view class="noneImg" v-if="!is_login">
				<image :src="staticBg + 'indexNone.png'" mode="" class="noneImg"></image>
				<text class="text">暂无预售活动~</text>
			</view>
			<view class="tabs" v-if="is_login">
				<view class="title-head">
				   <view class="t-h-left">
					   <image src="/static/img/indexSchool.png" class="headimg" mode=""></image>
					   <view class="title-text">{{school_name}}</view>
				   </view>
				   <view class="chageSchool" @tap="gochangeSchool">
					   <image src="/static/img/qihuan.png"  mode="" class="qihuan"></image>
					   更换学院
				   </view>
				</view>
				<uni-swiper-dot :info="swiper.info" :current="swiper.current"  :dots-styles="swiper.dotsStyles" field="content" :mode="swiper.mode">
					<swiper class="swiper-box" @change="changeSwiper" :class="{headai:hasOnly}">
						<swiper-item v-for="(item,index) in prolist" :key="index">
							<view class="swiper-item">
								<view class="s-items">
									<view @tap="changeProfession(item2)" class="s-item" :class="{active:item2.id == professionId}" v-for="(item2,index2) in item" :key="index2">{{item2.name}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="goods" v-if="is_login">
				<div class="g-head">
					<view class="g-title">
						{{proText}}专业
					</view>
					<view class="selectBox">
						<uni-data-select
							style="width: 100%;"
							 v-model="year"
							 :localdata="rangeType"
							  @change="onChange"
							 :clear="false"
						   ></uni-data-select>
					</view>
				</div>
				<view class="noneImg" v-if="goodlist.length < 1">
					<image :src="staticBg + 'indexNone.png'" mode="" class="noneImg"></image>
					<text class="text">暂无活动~</text>
				</view>
				<view class="items" v-if="goodlist.length > 0">
					<view class="d-items" v-for="(item,index) in goodlist" :key="index">
						<view class="d-top" @tap="goDetail(item)">
							<view class="d-d-title">
								{{item.name}}
							</view>
							<view class="d-d-m">
								<image src="/static/img/shijian.png" mode="" class="imageIcon"></image>
								<text>订购时间：{{item.start_time}}至{{item.end_time}}</text>
							</view>
							<view class="d-d-m">
								<image src="/static/img/car.png" mode="" class="imageIcon"></image>
								<text>发货时间：{{item.delivery_date}}</text>
							</view>
						</view>
						<view class="d-d-bottom">
							<view class="d-d-b-bt">
							    <button open-type="share" class="shareBtn" @tap="eventShare(item,id)">
									<image src="/static/img/weixin.png" mode="" class="d-d-b-icon"></image>
									<text>分享</text>
								</button>
							</view>
							<view class="d-d-b-bt" @tap="suoming(item)">
								<image src="/static/img/shuoming.png" mode="" class="d-d-b-icon"></image>
								<text>说明</text>
							</view>
							<view class="d-d-b-zfbt"  @tap="goDetail(item)">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
		     
			<view class="new-title">
				倍阅书店状态
			</view>
			<view class="newsWrap">
				<view class="news-item" @tap="goH5(1)">
				   <view class="imgBox">
					   <image src="/static/img/ex01.jpg" mode=""  class="img"></image>
				   </view>
				   <view class="info">
					  <view class="p">湖北省新华书店集团倍阅中南大店荣获全国“年度最美书店”</view>
					 <!--  <view class="infoBottom">
						   <image src="/static/img/yuedu.png" mode="" class="n-icon"></image> <text class="text">122</text>
						    <image src="/static/img/dianzhan.png" mode="" class="n-icon n-icon2"></image> <text class="text">122</text>
					   </view> -->
				   </view>
				</view>
				<view class="news-item" @tap="goH5(2)">
				   <view class="imgBox">	
					   <image src="/static/img/ex02.jpg" mode="" class="img"></image>
				   </view>
				   <view class="info">
					  <view class="p">在倍阅，不止阅读！</view>
					<!--   <view class="infoBottom">
						   <image src="/static/img/yuedu.png" mode="" class="n-icon"></image> <text class="text">122</text>
						    <image src="/static/img/dianzhan.png" mode="" class="n-icon n-icon2"></image> <text class="text">122</text>
					   </view> -->
				   </view>
				</view>
			</view>
			</view>
			<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" :showClose='false' cancelText="关闭" confirmText="关闭" :title="dialogTitle" content="欢迎使用 uni-popup!"
						@close="dialogClose">
						<view class="errimgBox">
							<rich-text :nodes="strings"></rich-text>
						</view>
					</uni-popup-dialog>
				</uni-popup>
			<tab-bar :current="1"></tab-bar>
		</scroll-view>
</template>
<script>
	
import { mapMutations, mapActions, mapGetters } from "vuex";	
import { getProfession, test } from '@/api/user.js'
import { getGoods, getOrder } from '@/api/goods.js'
import { getGrade } from '@/api/app.js'
	export default {
		data() { 
			return {
				goodlist:[],
				is_login:false,
				collogeId:'',
				professionId:'',
				school_name:'',
				next:true,
				dialogTitle:'活动说明',
				strings:'',
				msgType:'',
				shareID:'',
				shareTitle:'',
				prolist:[],
				topPay:false,
				prolistApiList:[],
				year:0,
				rangeType:[{
					text:2024,
					value:1
				},{
					text:2025,
					value:2
				},{
					text:2026,
					value:3
				},{
					text:2027,
					value:4
				}],
				swiperTop:{
					current:0,
					mode:'round',
					list:[{text:1},{text:2}],
					info:[],
					dotsStyles:{
						backgroundColor: '#a7c8fa',
						border: '1px #a7c8fa solid',
						color: '#fff',
						bottom:"-10rpx",
						selectedBackgroundColor: '#3c84f4',
						selectedBorder: '1px #3c84f4 solid'
					}
				},
				swiper:{
					current:0,
					mode:'round',
					info:[],
					dotsStyles:{
						backgroundColor: '#a7c8fa',
						border: '1px #a7c8fa solid',
						color: '#fff',
						bottom:"-10rpx",
						selectedBackgroundColor: '#3c84f4',
						selectedBorder: '1px #3c84f4 solid'
					}
				},
			}
		},
		onShareAppMessage(e){
			if(e.from === "button") {
				return {	
					title:this.shareTitle,
					path:"/pages/detial/detial?id=" + this.shareID + "&share=share" 
				}
			} 
		},
		computed: {
			...mapGetters(['token']),
			proText() {
				const result = this.prolistApiList.find(item  => item.id  === this.professionId);
				if(result) {
					return  result.name
				} else {
					return ''
				}
			},
			hasOnly() {
				if(this.prolistApiList.length < 3) {
					return true
				} else {
					return false
				}
			}
		},
		onLoad() {
			// console.log(this.user);
			// if(this.token) {
			// 	this.test();
			// }
		},
		onShow() {
			// console.log(this.token);
			if(this.token) {
				this.is_login = true;
				this.initColloge();
				this.checkPay();
			} else {
				this.is_login = false;
				uni.showToast({
					title:'您尚未登录',
					icon:'none'
				})
			}
		},
		methods: {
			...mapMutations(["setUserInfo"]),
			initColloge() {
				uni.$on('pageBackData', (data) => {
					 this.collogeId = data.id;
					 this.school_name = data.name;
					 this.professionId = -1;	
					 this.next = false;
					 this.GetProfession();
					 uni.$off('pageBackData');
				});
				if(this.next) {
					if(this.user.school_college_id) {
						this.collogeId = this.user.school_college_id
						this.school_name = this.user.school_name
						this.professionId = this.user.school_profession_id
						this.GetProfession();
					} else {
						uni.showToast({
							title:'请完善学生信息',
							icon:'none'
						})
					}
				}			
			},
			gaoInt() {
				uni.showToast({
					title:'暂未开放，敬请期待',
					icon:'none'
				})
			},
			goLogin() {
				this.$Router.replace('/pages/login/login')
			},
			async GetGrade() {
				const { data }  = await getGrade();
				this.rangeType = data.map((item) => {
					return {
						value:item.id,
						text:item.name
					}
				})
				this.rangeType.unshift({
					value:0,
					text:'全部'
				})
				
				this.GetGoods();
			},
			// async test() {
			// 	const { data }  = await test();
			// 	console.log(data);
			// },
			goH5(num) {
				this.$Router.push('/pages/weixinWeb/weixinWeb?type=' + num)
			},
			async GetProfession(){
				const { data }  = await getProfession({
					id:this.collogeId
				});
				this.prolistApiList = data;
				this.prolist = this.chunkArray(data)
				if(this.professionId == -1) {
					try {
						this.professionId = this.prolistApiList[0].id;
					} catch {
						this.professionId = -1;
					}
				}
				this.GetGrade();
			},
			async GetGoods() {
				const post_data = {
					profession_id:this.professionId,
					year:this.year
				}
				// console.log(post_data);
				const { data }  = await getGoods(post_data);
				this.goodlist = data;
			},
			async checkPay() {
				const obj = {
					pageSize:6,
					page:1,
					subscribe_type:0,
					show_status:0
				}
				const res = await getOrder(obj);
			    if(res.data.data.length > 0) {
					this.topPay = true;
				} else {
					this.topPay = false;
				}
			},
		    eventShare(item) {
				this.shareID = item.id;
				this.shareTitle = item.alias
				// console.log(item.alias);
				// console.log(item.id);
			},
			onChange(e) {
			   //console.log(this.year);	
			   this.GetGoods();
			},
			changeProfession(item) {
				// console.log(item.id);
				this.professionId = item.id;
				this.GetGoods();	
			},
			goDetail(item) {
				// console.log(item);
				this.$Router.push('/pages/detial/detial?id=' + item.id,)
			},
			changeSwiper(e) {
				this.swiper.current = e.detail.current;
			},
			chunkArray(arr) {
			  const result = [];
			  for (let i = 0; i < arr.length;  i += 4) {
			    result.push(arr.slice(i,  i + 4));
			  }
			  // console.log(result);
			  return result;
			},
			goToPay(){
				this.$Router.push('/pages/orders/orders?id=1')
			},
			changeCity(e){
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.form_data.cityIndex = e.detail.value
			},
			gochangeSchool() {
				// console.log(this.collogeId);
				// 
				this.$Router.push("/pages/changeSchool/changeSchool?id="+ this.collogeId)
			},
			suoming(item) {
				this.strings = item.detail;
				this.$refs.alertDialog.open();
			},
			scrolltolower() {
				//console.log('首页到底了');
			}
		},
		onHide() {
			
		},
	    onUnload() {
	        uni.$off('pageBackData'); 
	    },
	}
</script>
<style lang="scss">
	@import "@/static/css/detial.scss";
	    .blocks {
			width: 720rpx;
			margin: 0 auto 20rpx;
			display: flex;
			justify-content: space-between;
			.block {
				width: 351rpx;
				height: 182rpx;
				position: relative;
				background-size: contain;
				background-position: center;
				.text {
					position: absolute;
					left: 29rpx;
					bottom: 26rpx;
					color: #fff;
					font-size: 23rpx;
				}
			}
		}
		.newsWrap {
			padding: 0 26rpx;
		}
		.news-item {
			background-color: #fff;
			border-radius: 22rpx;
			display: flex;
			padding: 26rpx;
			margin-bottom: 30rpx;
			.imgBox {
				width: 122rpx;
				height: 122rpx;
				flex: none;
				.img {
					width: 122rpx;
					height: 122rpx;
				}
			}
			.info {
				  width:550rpx;
				.p {
					width:550rpx;
					padding-left:30rpx;
					padding-right: 20rpx;
					overflow: hidden;
					line-height: 39rpx;
					height: 80rpx;
					@include textTwo();				
				}
				.infoBottom {
					padding-top: 20rpx;
					padding-left: 20rpx;
					font-size:26rpx;
					color:#a6a6a6;
					.text {
						margin-right: 40rpx;
					}
					.n-icon {
						width: 39rpx;
						height: 25rpx;
						vertical-align: text-bottom;
						margin-right: 10rpx;
						position: relative;
						top:-1rpx;	
						
						&.n-icon2 {
							width: 36rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	    .top-banner {
			width: 700rpx;
			margin: 0 auto;
			height: 337rpx;
			margin-bottom: 30rpx;
			border-radius: 26rpx;
			overflow: hidden;
			.swiper-box-top {
				width: 700rpx;
				height: 337rpx;
			}
			.swiper-item {
				width: 700rpx;
				height: 337rpx;
				background-color: #fff;
				.img {
					width: 100%;
				}
			}
		}
		.new-title {
			padding-left: 52rpx;
			font-size: 31rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
			color: #000;
			position: relative;
			&:before {
				content: '';
				position: absolute;
				height: 26rpx;
				width: 6rpx;
				border-radius: 8rpx;
				background-color: #3c84f4;
				left: 30rpx;
				top:11rpx;
			}
		}
		.payMore {
			background-color: #ffebeb;
			display: flex;
			width: 700rpx;
			justify-content: space-between;
			margin: 0 auto;
			font-size: 26rpx;
			color:#ff4f4f;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 18rpx 15rpx;
		}
		.noneImg {
			position: relative;
			width: 580rpx;
			display: block;
			margin: 0 auto;
			.text {
				position: absolute;
				left: 201rpx;
				bottom: 58rpx;
				color: #a6a6a6;
			}
		}
		.scroll-v {
			height: 100vh;
			width: 100vw;
			overflow-x: hidden;
			background-color: #f5f8fa;
			.swiper-box {
				 height: 325rpx;
				 &.headai {
					 height:142rpx;
				 }
			}
			.top {
				width: 750rpx;
				height: 253rpx;
				padding: 115rpx 0 0 36rpx;
				display: flex;
				flex: none;
				color:#fff;
				.name {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
				.info {
					font-size: 24rpx;
				}
				.headimg {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
			.tabs {
				width: 700rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 26rpx;
				padding: 35rpx 26rpx 16rpx;
				.title-head {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.t-h-left {
						display: flex;
					}
					.chageSchool {
						width: 180rpx;
						height: 80rpx;
						// background-color: red;
						font-size: 26rpx;
						color: #3c84f4;
						padding-top: 12rpx;
						position: relative;
						top:-5rpx;
						text-align: right;
						font-weight: bold;
					}
					.qihuan {
					   width: 31rpx;
					   height: 27rpx;
					   margin-right: 10rpx;
					   position: relative;
					   top:4rpx;
					}
				}
			   .headimg {
				   width: 36rpx;
				   height: 32rpx;
				   margin-right: 10px;
				   vertical-align: text-bottom;
			   }
			   .title-text {
				   font-weight: bold;
				   font-size: 28rpx;
			   }
			   .s-items {
				   width: 100%;
				   height: 100%;
				   display: flex;
				   justify-content: space-between;
				   flex-wrap: wrap;
				   .s-item {
					   width: 312rpx;
					   height: 124rpx;
					   flex: none;
					   margin-bottom: 22rpx;
					   background-color: #f4f6f8;
					   border-radius: 23rpx;
					   @include center
					   &.active {
						   background-color: #3f8afa;
						   color:#fff;
					   }
				   }
			   }
			}
		}
	
	.goods{
		width: 700rpx;
		margin: 0 auto 30rpx;
		border-radius: 26rpx;
		padding-top: 37rpx;
		.g-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.g-title {
				width: 530rpx;
				font-size: 30rpx;
				padding-left: 30rpx;
				 @include text
			}
			.selectBox {
				width: 210rpx;
			}
		}
	}
	button {
		background-color: #fff !important;
	}
	.shareBtn {
		background: transparent !important;
		border: none;
		font-size: 28rpx;
		color:#a6a6a6;
		&:after {
			border: none;
		}
	}
</style>
